import React, { useEffect, useState } from "react";
import { Popup, Steps, Button } from "antd-mobile";
import { useParams,useNavigate } from "react-router-dom";
import api from "../../axios/api";
import "./List.css";
const Index = () => {
    let navigate=useNavigate()
  const { Step } = Steps;
  const [visible1, setVisible1] = useState(false);
  const [list, setlist] = useState([]);
  const { id } = useParams();
  console.log(id);
  const getData = async () => {
    const res = await api.get("/api/trip/train/detail", { params: { id } });
    const { code, data } = res.data;
    if (code == 200) {
      console.log(res.data);
      setlist(data);
    }
  };
  useEffect(() => {
    getData();
  }, []);
  const gopj=()=>{
    navigate('/pj')
  }
  const goorder=(id)=>{
    navigate(`/order/${id}`)
  }
  return (
    <div>
      <div className="box">
        <p>
          <span>21:03</span>
          <span>{list.startTime}</span>
          <span>21:03</span>
        </p>
        <p>
          <span>{list.start}</span>
          <span
            onClick={() => {
              setVisible1(true);
            }}
          >
            D2444，时刻表
          </span>
          <span>{list.end}</span>
        </p>
      </div>
      <div className="box2">
        <p>
            <span className="yi">
                <p>有票方案</p>
                <p>￥785</p>
                <p>有票</p>
            </span>
            <span className="er">
                <p>二等座</p>
                <p>￥345</p>
                <p>有票</p>
            </span>
            <span className="er">
                <p>一等座</p>
                <p>￥865</p>
                <p>有票</p>
            </span>
            <span className="er">
                <p>商务座</p>
                <p>￥1973</p>
                <p>有票</p>
            </span>
        </p>
        <p><h3>其他方案</h3></p>
        <div style={{fontSize:'20px'}}>
            上车-
            二等座-
            .....-
            补四站-
            下车
        </div>
        <div className="box3">
            <p>
                <span className="zuo">￥333</span>
                <span className="you" onClick={()=>goorder(list.id)}>订</span>
            </p>
        </div>
      </div>
      <div>
        <Button color='success' onClick={()=>gopj()}>去评价</Button>
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
      <p>
        <span style={{marginLeft:'170px'}}>时刻表</span>
        <span style={{float:'right'}} onClick={() => {
              setVisible1(false);
            }}>X</span>
      </p>
        <Steps direction="vertical">
          <Step
            title="北京南"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="天津南"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="德州东"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="济南西"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="徐州西"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="合肥东"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="常州北"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
        </Steps>
      </Popup>
    </div>
  );
};

export default Index;
